import React, { useContext, useMemo } from 'react'
import Myback from '../components/Myback'
import type { RouteComponentProps } from 'react-router-dom'
import { useHistory, useLocation } from 'react-router-dom'
import Ctx from '../store/Ctx'
import type { dataTs } from '../store/storeTs'
import { Arrow, Like, Star } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space } from 'react-vant'

export default function Details(props: RouteComponentProps) {

  //获取数据
  let obj = useContext(Ctx)

  let location = useLocation()
  //console.log(location);

  //获取id
  let id = location.state
  //console.log(id);

  let itemobj = useMemo(() => {
    return obj.datalist.find((item: dataTs) => {
      return item.id == id
    })
  }, [obj.datalist, id])


  return (
    <div>
      {/* 导航栏 */}
      <Myback title={'详情页'} leftText></Myback>

      {/* 详情页渲染 对应的数据  */}
      <Card round style={{ marginBottom: 20 }}>
        <Card.Cover>
          <Image src={itemobj.img} height={'60vh'} />
        </Card.Cover>
        <Card.Header>
          {itemobj.title}
        </Card.Header>
        <Card.Body>
          {itemobj.ms}
        </Card.Body>
        <Card.Footer>
          <Space>
            <span onClick={() => {
              //收藏
              obj.dispatch({
                type: 'change_collect',
                payload: itemobj.id
              })
            }}>
              <Star color={itemobj.collect ? 'red' : '#999'} />
            </span>
            <Button size='mini' round
              type={itemobj.sub ? 'warning' : 'default'}
              onClick={() => {
                //订阅状态切换
                obj.dispatch({
                  type: 'change_sub',
                  payload: itemobj.id
                })
              }}>
              {itemobj.sub ? '已经订阅' : '免费订阅'}
            </Button>
          </Space>
        </Card.Footer>
      </Card>

    </div>
  )
}
